<template>
  <div class='echartBox'>
    <div class='title'>echart数据可视化
      <span class='time'>{{time}}</span>
    </div>
    <div class="main">
      <div class="left">
        <div class="box1">
          <template v-for="(item,index) in options">
            <maxEchart
              :title="item.title"
              :tooltip="item.tooltip"
              :xAxis="item.xAxis"
              :yAxis="item.yAxis"
              :series="item.series"
              :width="item.width"
              :height="item.height"
              :key="index"
            ></maxEchart>
          </template>

        </div>
        <!-- <div>
          <maxEchart></maxEchart>
        </div class="box2">
        <div>
          <maxEchart></maxEchart>
        </div class="box3"> -->
      </div>
      <div class="map"></div>
      <div class=right></div>
    </div>
  </div>
</template>

<script>
import maxEchart from "@/components/MaxEchart"
// 基于准备好的dom，初始化echarts实例
// var box1 = echarts.init(document.querySelector('.box1'));
// var box2 = echarts.init(document.querySelector('.box2'));
// var box3 = echarts.init(document.querySelector('.box3'));

export default {
  name: 'myechart',
  data() {
    return {
      time: "",
      options: [
        {
          color: ["#2f89cf"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
                "电商行业",
                "社交行业",
                "金融行业"
              ],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12"
                }
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                  // width: 1,
                  // type: "solid"
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                }
              }
            }
          ],
          series: [
            {
              name: "直接访问",
              type: "bar",
              barWidth: "35%",
              data: [200, 300, 300, 900, 1500, 1200, 600],
              itemStyle: {
                barBorderRadius: 5
              }
            }
          ]
        },
        {
          color: ["#00f2f1", "#ed3f35"],
          tooltip: {
            // 通过坐标轴来触发
            trigger: "axis"
          },
          legend: {
            // 距离容器10%
            right: "10%",
            // 修饰图例文字的颜色
            textStyle: {
              color: "#4c9bfd"
            }
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: "#012f4a",
            containLabel: true
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            // 去除刻度
            axisTick: {
              show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
              color: "rgba(255,255,255,.7)"
            },
            // 去除x坐标轴的颜色
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            // 去除刻度
            axisTick: {
              show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
              color: "rgba(255,255,255,.7)"
            },
            // 修改y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "#012f4a"
              }
            }
          },
          series: [
            {
              name: "新增粉丝",
              type: "line",
              stack: "总量",
              // 是否让线条圆滑显示
              smooth: true,
              data: data.year[0]
            },
            {
              name: "新增游客",
              type: "line",
              stack: "总量",
              smooth: true,
              data: data.year[1]
            }
          ]
        },
        {
          title: {},
          color: [],
          tooltip: {},
          xAxis: {},
          yAxis: {},
          series: {}
        }
      ]
    };
  },
  components: {
    maxEchart
  },
  created() {
    this.getNowTime()
    console.log(this.$echart)
  },

  mounted() {
    console.log(this.$echart)
  },

  methods: {
    //获取当前时间
    getNowTime() {
      let date = new Date();
      this.time = this.$moment(date).format("YYYY-MM-DD:hh:mm:ss")
    }
  },
};
</script>

<style lang="scss" scoped>
.echartBox{
	padding:0;
	margin:0;
	box-sizing: border-box;
  width:100%;
  height: 100vh;
  background:url("../../assets/bg.jpg")

}
.title{
  position:relative;
  height:1rem;
  background:url("../../assets/head_bg.png");
  color:#fff;
  height:1rem;
  line-height:1rem;
  text-align: center;
  font-size: 18px;
  font-weight:bold;
  .time{
    position:absolute;
    right:5px;
    font-size:14px;
  }
}
.main{
  display: flex;
  height:100%;
  .left{
    flex:3;
    & > div{
      height:33%;
      margin-bottom:0.2rem;
      position:relative;
      & > ::before {
        content:"";
        width:10px;
        height:10px;
        border-top:1px solid blue;
        border-left:1px solid blue;
        position:absolute;
        left:0;
        top:0;
      }
      
    }
    
  }
  .map{
    flex:5;
    background:yellow;
  }
  .right{
    flex:3;
    background:pink;
  }
}


</style>
